<template>
	<view class="content">
		<!-- 顶部 -->
		<view class="header_top">
			<!-- <view class="back_img" style="padding-right: 200rpx;">
				<image src="../../static/img/返回.png" mode="scaleToFill" @tap='back'></image>
			</view> -->
			<view class="header">
				<view class="">
					<image src="../../static/img/T/12.png" mode="scaleToFill"></image>
					及物甄品
					<image src="../../static/img/T/12s.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		<!-- 导航 -->
		<view class="nav">
			<view class="li" v-for="(item,index) in nav_list" :key='index' @tap="select_nav(index)" :class="index==current?'active':''">
				{{item.title}}

			</view>
		</view>
		<!-- T恤定制 -->
		<view class="customized" v-if="current==0">
			<view class="customized_T">
				
				<view class="right">
					
					<view class="VerticalBox">
						<view class="" @tap='share_news' style="color: #007AFF; padding: 0 10rpx; width: 100rpx;">
							分享
						</view> 
						<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
							<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in GoodsImages" :key="index"
							 @tap="TabSelect(item)" :data-id="index">
							 <view class="right" :style="'border: 15rpx solid'+item.color_value+ ';'">	 				
							 </view>
							</view>
						</scroll-view>
					</view>
				</view>

				<view class="center">
					<view class="top" id="caiidlr">
						<image class="bg_image" ref="imageDom" :src="front_current==1?front_image:back_image" mode=""></image>
						<!-- <image class="bg_image" ref="imageDom" src="../../static/1499.png" mode=""></image> -->
						
						<view class="move">
							<movable-area scale-area>
								<movable-view direction="all" out-of-bounds scale scale-min='0.5' scale-max="1.5" inertia='false' @change="onChange"
								 @scale='onScale'>
									<image  class="move_image" :src="pic_cover_small" mode="scaleToFill" :style="'transform:rotate('+degrees+'deg);'"></image>
									<!-- <image  class="move_image" :src="pic_cover_small" mode="aspectFit" :style="'transform:rotate('+degrees+'deg);'"></image> -->
								</movable-view>
							</movable-area>
						</view>
					</view>
					<view class="" style="display: flex;justify-content: center; align-items: center;">
						<view class="fots">
							<view :class="front_current==1?'active':''" @tap="front(1)">
								正面
							</view>
							<view :class="front_current==2?'active':''" @tap="front(2)">
								反面
							</view>
						</view>
						<view class="fotss">
							<view >
								<image src="../../static/img/jian.png" mode="" @tap='jian' style="width: 40rpx; height: 40rpx;"></image>
							</view>
							<view style="padding: 0 5rpx;">旋转</view>
							<view>
								<image src="../../static/img/jia.png" mode="" @tap='jia' style="width: 40rpx; height: 40rpx;"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="right">
					<view class="VerticalBox">
						<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 715upx)">
							<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in GoodsImages" :key="index"
							 @tap="TabSelect(item)" :data-id="index">
								<view class="left">
									<view class="left_color" v-show="item.id==tabCur" :style="'background:'+item.color_value+'; box-shadow: 0px 2px 8px 1px'+item.color_value+';'">

									</view>
								</view>
								<view class="right" :style="'border: 15rpx solid'+item.color_value+ ';'">

								</view>
							</view>
						</scroll-view>
					</view>
				</view> -->
			</view>
			<!-- 文字选择 -->
			<view class="words_nav">
				<view class="li" v-for="(item,index) in GoodsAlbum" :class="index==words_nav_current?'active':''" @tap="select_words_nav(index,item)">
					{{item.title}}
				</view>
			</view>

			<view class="words_img">
				<view class="li" v-for="(item,index) in GoodsAlbum[words_nav_current].ImageList">
					<image :src="item.pic_cover_small" mode="" @tap='select_img(item)'></image>
				</view>
			</view>

			<!-- 发货 -->
			<view class="goods" style="justify-content: left;padding-left: 10rpx;color: #ff0000;">
				<view class="left">
					<view class="lis" style="color: #aaaaaa;">
						原价：
					</view>
					<view class="lis" style="color: #aaaaaa;text-decoration:line-through;">
						￥{{data.market_price}}
					</view>
					<view class="lis" style="color: #FFFFFF;background-color: #ff0000;text-align: center;" v-if="data.price!=null">
						折扣价
					</view>
					<view class="lis" style="padding-left: 20rpx;color: #aaaaaa;"  v-if="data.price!=null">
					   ￥{{data.price}}
					</view>
				</view>
			</view>
			<view class="goods">
				<view class="left">
					<view class="li" style="color: #FFB400;">
						发货
					</view>
					<view class="li" style="border-right: 1px solid #EEEEEE;">
						<image src="../../static/img/address.png" mode=""></image>
						{{data.DeliverAddress}}
					</view>
					<view class="li" style="border-right: 1px solid #EEEEEE;">
						快递：{{data.shipping_fee}}
					</view>
					<view class="li">
					     销量 {{data.sales}}
					</view>
				</view>
				<view class="right" @tap='popup_coupon'>
					领劵
					<image src="../../static/ss.png" mode=""></image>
					<image src="../../static/ss.png" mode=""></image>
				</view>
			</view>
			
			<view class="" @tap="size">

				<uni-list @tap="size">
					<uni-list-item title="请选择尺码:" :rightText='sku_name'>
					</uni-list-item>
				</uni-list>
			</view>


		</view>


		<!-- 数量 -->
		<view class="number">
			<view class="left">
				数量：
				<lxc-count @handleCount="handleCountClick" index=0 value=1 :delayed="100">
				</lxc-count>
			</view>
			<view class="center">
				合计：<text style="color: #3B71D2; font-size: 35rpx;">￥{{data.price*num}}</text>
			</view>
			<view class="right">
				<view class="bot" @tap='place_order'>
					提交订单
				</view>
			</view>
		</view>



		<!-- 更多成品 -->
		<view class="product" v-if="current==1">
			<view class="li" v-for="(item,index) in GoodsAlbumFinished">
				<view class="top">
					<view class="row">

					</view>
					<view class="center">
						{{item.title}}
					</view>
					<view class="row">

					</view>
				</view>
				<view class="center">
					<view class="li" v-for="(item,index) in item.ImageList">
						<image :src="item.pic_cover_small" mode="aspectFit"></image>
						<view class="text">
							{{item.pic_name}}
						</view>
					</view>
				</view>
				<view class="fot" @tap='select_id(item)'>
					<uni-pagination title="标题文字" show-icon="true" :total="item.Pages" current="1" @change='current_page'></uni-pagination>
				</view>
			</view>
		</view>
		<!-- 材质工艺 -->
		<view class="technology" v-if="current==2">
			<view class="li" v-for="(item,index) in 1" :key='index'>
				<!-- <view class="top">
					<view class="row">

					</view>
					<view class="center" v-html="data.introduction">
					</view>
					<view class="row">

					</view>
				</view> -->
				<view class="fot" v-html="data.keywords">
				</view>
				<view class="fot" v-html="data.introduction">
				</view>
			</view>
			
		</view>
		<!-- 弹框 -->
		<!-- 尺码选择 -->
		<uni-popup ref="popup" type="center">
			<view class="size">
				<view class="top">
					<view class="left">
						尺码选择：{{sku_name}}
					</view>
					<view class="right" @tap="Reference">
						尺码推荐对照表
					</view>
				</view>
				<view class="center">
					<view class="li_bot" v-for="(item,index) in GoodsSku" @tap='select_size(item)'>
						{{item.sku_name}}
					</view>
				</view>
				<view class="fot">
					<view class="left" @tap="cancel">
						取消
					</view>
					<view class="left active" @tap="determine">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 尺码推荐对照表（仅参考） -->
		<uni-popup ref="popup_r" type="center">
			<view class="Reference">
				<view class="top">
					尺码推荐对照表（仅参考）
				</view>
				<view class="center" style="background:rgba(59,113,210,0.27);">
					<view class="text">
						尺码
					</view>
					<view class="text">
						身高(cm)
					</view>
					<view class="text">
						体重(kg)
					</view>
				</view>
				<view class="center" v-for="(item,index) in GoodsSku" :key="index">
					<view class="text">
						{{item.sku_name}}
					</view>
					<view class="text">
						{{item.volume}}
					</view>
					<view class="text">
						
						{{item.weight}}
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 自定义上传 -->
		<uni-popup ref="popup_my" type="center">
			<view class="custom">
				<view class="top">
					自定义上传
				</view>
				<view class="center">
					<view class="left" @tap="album">
						<image src="../../static/bd.png" mode=""></image>
						<view class="text">
							图片上传
						</view>
					</view>
					<!-- <view class="left">
						<image src="../../static/xj.png" mode=""></image>
						<view class="text" @tap="camera">
							反上传
						</view>
					</view> -->
				</view>
				<view class="tops">
				 
				</view>
				
				<view class="fot">
					<view class="left" @tap='cancel'>
						取消
					</view>
					<view class="left active" @tap='cancel'>
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 优惠卷领取 -->
		<uni-popup ref="popup_coupon" type="bottom">
			<view class="not_used">
				<view class="" style="text-align: center; padding: 20rpx 0;font-size: 32rpx;">
					选择优惠卷
				</view>

				<view class="" style="font-size: 28rpx;color: #C8C7CC;margin-top: 100rpx;text-align: center;" v-if="RecievingCoupon.length == 0"><text>暂无可用的优惠券~</text></view>

				<scroll-view scroll-y="true" style="height: 500rpx;" v-else>
					<view class="li" v-for="(item,index) in RecievingCoupon" :key='index'>
						<view class="left">
							<view class="top">
								{{item.coupon_name}}
							</view>
							<view class="center">
								￥{{item.money}}
							</view>
							<view class="fot">
								满{{item.at_least}}元可用
							</view>
							<view class="fot" v-if="item.term_of_validity_type==0">
								有效期：{{item.start_time}}至{{item.end_time}}
							</view>
							<view class="fot" v-if="item.term_of_validity_type==1">
								有效期：{{item.fixed_term}}天
							</view>
						</view>
						<view class="right" v-if="item.is_recievd==0" @tap='receive(item)'>
							立即领取
						</view>
						<view class="right"  v-if="item.is_recievd==1">
							已领取
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 分享 -->
		<uni-popup ref="popup_share" type="center">
			<view class="size">
				<view class="top">
					<view class="left">
						分享到
					</view>
				</view>
				<view class="center_share" style="margin-top: 50rpx;">
					<view class="left" @tap='share_left'>
						<image src="../../static/img/9.png" mode=""></image>
						<view class="text">
							分享到朋友圈
						</view>
					</view>
					<view class="right" @tap='share_right'>
						<image src="../../static/img/10.png" mode=""></image>
						<view class="text">
							分享给朋友
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup_coupon_show" type="center">
			<view class="share_img" style="">
				<image src="../../static/1.png" mode=""></image>
				<image src="../../static/按钮.png" mode="" @tap='tap_shows' style="width: 150rpx;height: 150rpx;"></image>
			</view>
		</uni-popup>
			


	</view>
</template>

<script>
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
	import lxcCount from '@/components/lxc-count/lxc-count.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'

	import '~@/../../static/js/jquery.js'
	import '~@/../../static/js/clipboard.min.js'
	import '~@/../../static/js/canves.js'

	import gmyList from "../../components/gmy-img-cropper/gmy-img-cropper.vue"
	import screenShot from '../../components/screen-shot/screen-shot.vue';

	import "~@/../../static/js/html2canvas"
	import "~@/../../static/js/jquery.js"
	import sanyue from "~@/../../static/js/jweixin-1.6.0.js"
	
	
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	export default {
		data() {
			return {
				current: 0,
				words_nav_current: 0,
				front_current: 1,
				verticalNavTop: 0,
				scrollLeft:0,
				tabCur: 9,
				old: {
					x: 0,
					y: 0
				},
				nav_list: [{
						id: 0,
						title: 'T恤定制',
					},
					{
						id: 1,
						title: '更多成品',
					},
					{
						id: 2,
						title: '材质工艺',
					}
				],
				data: {}, //商品详情信息
				GoodsAlbumFinished: [], //更多成品
				GoodsAlbum: [], //商品系列列表
				GoodsImages: [], //颜色
				page: null, //页码
				GoodsId: null, //商品id
				GoodsSku: {}, //规格
				sku_name: null,
				sku_id: null, //规格ID
				color_id: null, //颜色id
				series_id: 31, //系列id
				pic_id: null, //系列图片
				coupon_id: null, //优惠卷id
				num: 1, //数量
				price: 1, //规格价格
				front_image: '', //正面图片
				back_image: '', //反面图片
				pic_cover_small: '', //选择的文字图片
				RecievingCoupon: [], //可领取优惠卷数据
				custom_img: '', //自定义图片 
				BookPage: 1,
				PaintPage: 1,
				OriginalPage: 1,
				UserPage: 1,
				Page_id: null,
				base64: null, //截图路径
				x: 0,
				y: 0,
				scale: 1,
				imgUrl: '',
				wxdata_urlimg: '',
				img_show:0,
				degrees:null,//度数
				//html:"<p>12</p>"
			}
		},
		onLoad(e) {	
			// if(true){
			// 	alert(1)
			//    this.$refs.popup_coupon_show.open();
			// }
			this.GoodsId = e.id;
			var uid = uni.getStorageSync('uid');
			this.getData({
				Uid: uid,
				GoodsId: this.GoodsId
			});

			// var _hrtf = location.href.split('#')[0];
             
			// $.ajax({
			// 	url: this._urls + '/Common/ShareParam',
			// 	type: 'POST',
			// 	data: {
			// 		URL: encodeURIComponent(_hrtf)
			// 	},
			// 	success: (res) => {
			// 		this.wxdata_urlimg = res.data.ImageLogo;
			// 		_config(res.data);
			// 	}
			// })


			// //ar optiosn = ;

			// setTimeout(() => {
			// 	sanyue.ready(function() {
			// 		sanyue.updateAppMessageShareData({
			// 			title: '极物定制 ', // 分享标题
			// 			desc: '非常棒哇，买它就对了!!!', // 分享描述
			// 			link: _hrtf, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			// 			imgUrl: _this.wxdata_urlimg
			// 		});

			// 		sanyue.updateTimelineShareData({
			// 			title: '极物定制 ', // 分享标题
			// 			desc: '非常棒哇，买它就对了!!!', // 分享描述
			// 			link: _hrtf, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			// 			imgUrl: _this.wxdata_urlimg
			// 		});
			// 	});
			// }, 200);

			// function _config(vter) {
			// 	sanyue.config({
			// 		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			// 		appId: vter.appId, // 必填，公众号的唯一标识
			// 		timestamp: vter.timestamp, // 必填，生成签名的时间戳
			// 		nonceStr: vter.nonceStr, // 必填，生成签名的随机串
			// 		signature: vter.signature, // 必填，签名
			// 		jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
			// 	});
			// }

		},


		methods: {
			tap_shows(){
				this.$refs.popup_coupon_show.close();
			},
			share_news(){
				this.$refs.popup_coupon_show.open();
			},
			share_new(){
				var _hrtf = location.href.split('#')[0];
				$.ajax({
					url: this._urls + '/Common/ShareParam',
					type: 'POST',
					data: {
						URL: encodeURIComponent(_hrtf)
					},
					success: (res) => {
						this.wxdata_urlimg = res.data.ImageLogo;
						_config(res.data);
					}
				})
				
				
				//ar optiosn = ;
				
				setTimeout(() => {
					sanyue.ready(function() {
						sanyue.updateAppMessageShareData({
							title: '极物定制 ', // 分享标题
							desc: '非常棒哇，买它就对了!!!', // 分享描述
							link: _hrtf, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl: _this.wxdata_urlimg
						});
				
						sanyue.updateTimelineShareData({
							title: '极物定制 ', // 分享标题
							desc: '非常棒哇，买它就对了!!!', // 分享描述
							link: _hrtf, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl: _this.wxdata_urlimg
						});
					});
				}, 200);
				
				function _config(vter) {
					sanyue.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: vter.appId, // 必填，公众号的唯一标识
						timestamp: vter.timestamp, // 必填，生成签名的时间戳
						nonceStr: vter.nonceStr, // 必填，生成签名的随机串
						signature: vter.signature, // 必填，签名
						jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
					});
				}
				
			},

			getBase64: function(img) {
				function getBase64Image(img, width, height) { //width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
					var canvas = document.createElement("canvas");
					canvas.width = width ? width : img.width;
					canvas.height = height ? height : img.height;

					var ctx = canvas.getContext("2d");
					ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
					var dataURL = canvas.toDataURL();
					return dataURL;
				}
				var image = new Image();
				image.crossOrigin = '';
				image.src = img;
				var deferred = $.Deferred();place_order
				if (img) {
					image.onload = function() {
						deferred.resolve(getBase64Image(image)); //将base64传给done上传处理
					}
					return deferred.promise(); //问题要让onload完成后再return sessionStorage['imgTest']
				}
			},

			//绘制canvas
			toDrawCanvas() {

				uni.showLoading({
					mask: true
				});

				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				});

				// var _element  = jQuery('#caiidlr')[0]; 
				// var options = {
				// 	taintTest: false, //在渲染前测试图片
				// 	allowTaint: true
				// };
				var _this = this;

				setTimeout(() => {
					console.log("test");
					html2canvas(document.getElementById('caiidlr'), {
					
						taintTest: false, //在渲染前测试图片
						allowTaint: true,
						onrendered: function(canvas) {
							_this.imgUrl = canvas.toDataURL("image/png"); //"image/png"
						     console.log('12',_this.imgUrl)
							_this.imgUrl = _this.imgUrl.split(',')[1];
							var uid = uni.getStorageSync('uid');
							var json = {
								Uid: uid,
								GoodsId: _this.GoodsId,
								sku_id: _this.sku_id,
								goods_number: _this.num,
								color_id: _this.color_id,
								series_id: _this.series_id,
								pic_id: _this.pic_id,
								series_goods_image: _this.imgUrl,
							};
							
							_this.infoprop('/Order/CheckOrder', 'POST', json, (res) => {
								uni.hideLoading();
								if (res.data.status == 1) {
									uni.showToast({
										title: "提交成功！",
										icon: "none",
										success: () => {
											let json = {
												res: res.data.data,
												series_image: _this.custom_img, //自定义图片
												series_goods_image: _this.imgUrl, //成品图片
											}
											uni.setStorageSync('href', json)
											uni.navigateTo({
												url: '../place_order/place_order'
											});
										}
									});
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: "none"
									});
								}
							})
						}
					})
					//html2canvas(_element,options).then(canvas => {

					// this.imgUrl = canvas.toDataURL("image/png");//"image/png"
					//alert(this.imgUrl)
					//this.imgUrl = this.imgUrl.split(',')[1];
					// var uid = uni.getStorageSync('uid');
					// 		var json={
					// 			Uid:uid,
					// 			GoodsId:this.GoodsId,
					// 			sku_id:this.sku_id,
					// 			goods_number:this.num,
					// 			color_id:this.color_id,
					// 			series_id:this.series_id,
					// 			pic_id:this.pic_id,
					// 			series_goods_image:this.imgUrl,
					// 		};

					// 		alert(this.imgUrl)

					// this.infoprop('/Order/CheckOrder', 'POST', json, (res) => {
					// 	alert(1)
					//  // console.log(res);
					//  uni.hideLoading()
					//   if(res.data.status==1){
					// 	  uni.showToast({
					// 		title:"提交成功！",
					// 		icon:"none",
					// 		success:()=> {
					// 			let json={
					// 				res:res.data.data,
					// 				series_image:this.custom_img,//自定义图片
					// 				series_goods_image:this.imgUrl,//成品图片
					// 			}
					// 			uni.showModal({
					// 				content:"购买成功",
					// 				showCancel:false,
					// 				success: (res) => {
					// 					if(res.confirm){
					// 						//alert(1)

					// 						uni.setStorageSync('href',json)

					// 						uni.navigateTo({ 
					// 							url:'../place_order/place_order'
					// 						});
					// 					}
					// 				}
					// 			})

					// 		}
					// 	  });
					//   }else{
					// 	  uni.showToast({
					// 		title:res.data.msg,
					// 		icon:"none"
					// 	  });
					//   }
					//   })
					//});
				}, 1200)
			},
			place_order: function() { //提交订单
				this.toDrawCanvas();
			},

			//生成本地 图片
			getimg(url, _this) {
				console.log(url)
				uni.getImageInfo({
					src: url,
					success: (res) => {
						_this = res.path;
						console.log(res.path)
					}
				});
			},

			//商品详情接口
			getData(data) {
				this.infoprop('/Goods/GoodsDetail', 'POST', data, (res) => {
					this.data = res.data.data;
					this.GoodsAlbumFinished = this.data.GoodsAlbumFinished;
					this.GoodsAlbum = this.data.GoodsAlbum;
					this.GoodsSku = this.data.GoodsSku;
					this.GoodsImages = this.data.GoodsImages;
					this.front_image=this.GoodsImages[0].front_image;
					this.back_image=this.GoodsImages[0].back_image;
					console.log('12',this.back_image)
					

					// //生成本地图片
					// var _this = this;
					// this.getBase64(res.data.data.GoodsImages[0].front_image).then(function(base64) {
					// 	_this.front_image = base64; //处理成功打印在控制台
					// 	//console.log(_this.front_image)
					// }, function(err) {
					// 	console.log(err); //打印异常信息
					// });

					// setTimeout(() => {
					// 	this.getBase64(res.data.data.GoodsImages[0].back_image).then(function(base64) {
					// 		_this.back_image = base64; //处理成功打印在控制台
					// 	}, function(err) {
					// 		console.log(err); //打印异常信息
					// 	});
					// }, 1200)
					// //console.log();
					// //this.front_image
					// this.getimg(this.GoodsImages[0].front_image,this.front_image)

					// uni.getImageInfo({
					// 	src:this.GoodsImages[0].front_image,
					// 	success: (res) => {
					// 		console.log(1,res)
					// 		this.front_image = res.path;
					// 	}
					// });

					// this.getimg(this.GoodsImages[0].back_image,this.back_image)
					// uni.getImageInfo({
					// 	src:this.GoodsImages[0].back_image,
					// 	success: (res) => {
					// 		console.log(2,res)
					// 		this.back_image = res.path;
					// 	}
					// });

					//END

					//this.front_image=this.GoodsImages[0].front_image;
					//this.back_image=this.GoodsImages[0].back_image;
					this.color_id = this.GoodsImages[0].id;
					//console.log(this.GoodsAlbumFinished);
				});
			},

			current_page(e) {
				this.page = e.current;
				//console.log(e.current)
			},
			select_id(item) {
				this.Page_id = item.id;
				//console.log(this.Page_id)
				if (item.id == 34) {
					this.BookPage = this.page;
					var uid = uni.getStorageSync('uid');
					this.getData({
						Uid: uid,
						GoodsId: this.GoodsId,
						Id: item.id,
						BookPage: this.BookPage,
						PaintPage: this.PaintPage,
						OriginalPage: this.OriginalPage,
						UserPage: this.UserPage,
					})
				} else if (item.id == 35) {
					this.PaintPage = this.page;
					var uid = uni.getStorageSync('uid');
					this.getData({
						Uid: uid,
						GoodsId: this.GoodsId,
						Id: item.id,
						BookPage: this.BookPage,
						PaintPage: this.PaintPage,
						OriginalPage: this.OriginalPage,
						UserPage: this.UserPage,
					})
				} else if (item.id == 36) {
					this.OriginalPage = this.page;
					var uid = uni.getStorageSync('uid');
					this.getData({
						Uid: uid,
						GoodsId: this.GoodsId,
						Id: item.id,
						BookPage: this.BookPage,
						PaintPage: this.PaintPage,
						OriginalPage: this.OriginalPage,
						UserPage: this.UserPage,
					})
				} else if (item.id == 37) {
					this.UserPage = this.page;
					var uid = uni.getStorageSync('uid');
					this.getData({
						Uid: uid,
						GoodsId: this.GoodsId,
						Id: item.id,
						BookPage: this.BookPage,
						PaintPage: this.PaintPage,
						OriginalPage: this.OriginalPage,
				        UserPage: this.UserPage,
					})
				}
				//this.Id=id;
			},

			select_nav(index) {
				this.current = index;
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			TabSelect(item) {
				console.log(item)
				this.tabCur = item.id;
				this.front_image = item.front_image;
				this.back_image = item.back_image;
				this.color_id = item.id;

				var _this = this;
				this.getBase64(item.front_image).then(function(base64) {
					_this.front_image = base64; //处理成功打印在控制台
					//console.log(_this.front_image)
				}, function(err) {
					console.log(err); //打印异常信息
				});

				setTimeout(() => {
					this.getBase64(item.back_image).then(function(base64) {
						_this.back_image = base64; //处理成功打印在控制台
					}, function(err) {
						console.log(err); //打印异常信息
					});
				}, 1200)



				//console.log(this.color_id)
				//this.mainCur = e.currentTarget.dataset.id;
				//this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			handleCountClick(val, index) {
				this.num = val;
				console.log(val, index)
				this.mydata[index]['num'] = val
			},

			size() {
				this.$refs.popup.open()
			},
			Reference() {
				this.$refs.popup.close()
				this.$refs.popup_r.open()
			},
			custom() {
				this.$refs.popup_my.open()
			},

			camera() { //反面上传
				console.log(1)
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相机选择
					success: (res) => {
						//this.front_image = res.tempFilePaths[0];
						this.urlTobase64s(res.tempFilePaths[0]);
					}
				});
			},
			album() { //正面上传
				console.log(2)
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.img_show=1;
						this.urlTobase64(res.tempFilePaths[0]);
						//console.log("ws",this.urlTobase64(res.tempFilePaths[0]));
					}
				});
			},
			//64位转换
			urlTobase64(url) { //正面上传
				var toBase64Url;
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: res => {
						let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
						toBase64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
						this.pic_cover_small = toBase64Url;
						this.custom_img = toBase64Url.split(',')[1];
						console.log(this.custom_img);
					}
				});
			},
			urlTobase64s(url) { //反面上传
				var toBase64Url;
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: res => {
						let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
						toBase64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
						this.back_image = toBase64Url;
						//this.custom_img=toBase64Url;
					}
				});
			},
			onChange: function(e) {
				this.x = e.detail.x * 2;
				this.y = e.detail.y * 2;
				//console.log(e.detail.x,e.detail.y)
			},
			onScale: function(e) {
				this.x = e.detail.x * 2;
				this.y = e.detail.y * 2;
				this.scale = e.detail.scale;
				//console.log(this.scale)
			},
			select_words_nav(index, item) { //获取系列ID
				console.log("1", index);
				this.series_id = item.id;
				console.log(this.series_id);
				this.words_nav_current = index;
				if (index == 3) {
					console.log(1)
					this.custom();
				}
			},
			select_img(item) { //获取系列图片ID
				this.pic_cover_small = item.pic_cover_small;

				var _this = this;
				// this.getBase64(item.pic_cover_small).then(function(base64) {
				// 	_this.pic_cover_small = base64; //处理成功打印在控制台
				// 	//console.log(_this.front_image)
				// }, function(err) {
				// 	console.log(err); //打印异常信息
				// });


				this.pic_id = item.pic_id;
				//console.log(item)
			},
			select_size(item) { //规格的数据
				this.sku_name = item.sku_name;
				this.price = item.price;
				this.sku_id = item.sku_id;

				console.log(item)
			},
			front(e) {
				this.front_current = e;
				//console.log("1",e)
			},
			cancel() {
				this.$refs.popup.close();
				this.$refs.popup_my.close();
				this.sku_name = '';
			},
			determine() {
				this.$refs.popup.close();
			},

			popup_coupon() {
				var uid = uni.getStorageSync('uid');
				this.infoprop('/Coupon/RecievingCoupon', 'POST', {
					Uid: uid
				}, (res) => {
					this.RecievingCoupon = res.data.data;
					//console.log(res)
				});
				this.$refs.popup_coupon.open();
			},
			receive(item) { //领取优惠卷
				var uid = uni.getStorageSync('uid');
				this.infoprop('/Coupon/RecieveCoupon', 'POST', {
					Uid: uid,
					CouponTypeId: item.coupon_type_id
				}, (res) => {
					if (res.data.status == 1) {
						uni.showToast({
							title: '领取成功!',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						this.$refs.popup_coupon.close()
					}
					//console.log(res)
				});
			},
			//分享
			share() {
				this.$refs.popup_share.open()
			},


			// 返回上一级
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			jian(){
				this.degrees-=45;
			},
			jia(){
				this.degrees+=45;
			}
		},
		components: {
			uniPagination,
			lxcCount,
			uniPopupShare,
			screenShot,
			jyfParser
		}
	}
</script>

<style lang="scss">
	* {
		-webkit-overflow-scrolling: touch;
	}

	.content {

		padding-bottom: 250rpx;

		//background: red;
		.back_img {
			margin-left: -10rpx;

			image {
				width: 50rpx;
				height: 35rpx;
			}
		}


		//尺码选择
		.size {
			width: 600rpx;
			height: 500rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 20px;

			.top {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1px solid #EEEEEE;

				.left {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(59, 113, 210, 1);
				}

				.right {
					border: 1px solid rgba(255, 180, 0, 1);
					border-radius: 10px;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(255, 180, 0, 1);
					padding: 10rpx 10rpx;
				}
			}

			.center_share {
				display: flex;
				justify-content: space-around;
				align-items: center;
				text-align: center;
				font-size: 25rpx;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.center {
				display: flex;
				flex-wrap: wrap;

				.li_bot {
					margin: 20rpx 7rpx;
					background: rgba(59, 113, 210, 0.27);
					//border: 1px solid rgba(59, 113, 210, 1);
					border-radius: 25rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(59, 113, 210, 1);
					padding: 10rpx 50rpx;
				}
			}

			.fot {
				display: flex;
				justify-content: center;
				align-items: center;
				border-top: 1px solid #EEEEEE;
				margin-top: 105rpx;

				.left {
					width: 50%;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(174, 172, 172, 1);
					text-align: center;
					padding: 20rpx 0;
				}

				.active {
					//background: rgba(59, 113, 210, 0.27);
					color: #3B71D2;
					border-bottom-right-radius: 20px;
				}

			}
		}

		//尺码推荐对照表（仅参考）
		.Reference {
			width: 600rpx;
			height: 650rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 20px;

			.top {
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 180, 0, 1);
				text-align: center;
				padding: 20rpx 0;
			}

			.center {
				display: flex;
				justify-content: space-around;

				.text {
					width: 30%;
					text-align: center;
					padding: 20rpx 0;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(59, 113, 210, 1);
				}
			}
		}

		//自定义上传
		.custom {
			// width: 600rpx;
			// height: 500rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 20px;
			z-index: 999;

			.top {
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 180, 0, 1);
				text-align: center;
				padding: 20rpx 0;
			}
			.tops {
				width: 600rpx;
				font-size: 25rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #adafb4;
				text-align: center;
				padding: 5rpx 0;
			}

			.center {
				display: flex;
				justify-content: space-around;

				.left {
					padding: 20px 50rpx;
					background: rgba(59, 113, 210, 0.27);
					border: 1px solid rgba(59, 113, 210, 1);
					border-radius: 25px;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(59, 113, 210, 1);
					text-align: center;

					image {
						width: 100rpx;
						height: 100rpx;
					}
				}
			}

			.fot {
				display: flex;
				justify-content: center;
				align-items: center;
				border-top: 1px solid #EEEEEE;
				margin-top: 100rpx;

				.left {
					width: 50%;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(174, 172, 172, 1);
					text-align: center;
					padding: 20rpx 0;
					border-bottom-right-radius: 20px;
				}

				.active {
					//background: rgba(59, 113, 210, 0.27);
					color: #3B71D2;
					border-bottom-right-radius: 20px;
				}

			}
		}

		//优惠卷
		.not_used {
			height: 600rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 20px 20px 0px 0px;

			.li {
				margin: auto;
				width: 95%;
				height: 200rpx;
				background: url(../../static/img/6.png) no-repeat;
				background-size: 100% 100%;
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;

				.left {
					.top {
						font-size: 25rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						padding-left: 15rpx;
					}

					.center {
						font-size: 35rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						padding: 10rpx 10rpx;
					}

					.fot {
						font-size: 25rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
						padding: 5rpx 10rpx;
					}
				}

				.right {
					width: 150rpx;
					height: 50rpx;
					background: rgba(95, 148, 255, 1);
					border-radius: 24px;
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					line-height: 50rpx;
					margin: auto;
					margin-left: 320rpx;
				}
			}
		}

		//顶部
		.header_top {
			display: flex;
			align-items: center;
		}

		.header {
			//padding: 50rpx 0;
			width: 100%;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: center;
			background-color: rgba(59, 113, 210, 1);
			//margin-left: -25rpx;
			//border-bottom: 1px solid #EEEEEE;


			image {
				width: 50rpx;
				height: 35rpx;
				padding: 0 20rpx;
			}
		}

		// 导航
		.nav {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.li {
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(73, 72, 72, 1);
				text-align: center;
				//margin-top: 20rpx;
				border-bottom: 1px solid #FFFFFF;

				&.active {
					border-color: rgba(59, 113, 210, 1);
				}

				

				// .row {
				// 	width: 100rpx;
				// 	height: 2px;
				// 	background: rgba(59, 113, 210, 1);
				// 	border-radius: 3px;
				// 	margin: 10rpx auto;
				// }
			}

			.active {
				color: rgba(59, 113, 210, 1);
			}
		}

		//TT恤定制
		.customized {

			.customized_T {
				// display: flex;
				// justify-content: space-between;
				margin-top: 30rpx;
				height: 700rpx;

				//             .left{
				// height: 60rpx;
				// padding: 5rpx;
				// border-radius: 0 0 20rpx 20rpx;
				// font-size: 25rpx;
				//  background-color: #F0F0F0;
				// }
				.center {
					//padding: 0 100rpx;
					background: rgba(59, 113, 210, 0.07);
					border-radius: 20px;
                    .top{
						display: flex;
						justify-content: center;
						position: relative;
					}
					.bg_image {
						width: 100%;
						height:700rpx;
						position: relative;
					}

					.move {
						//z-index: 999;
						top:100rpx;
						left:50%;
						transform: translateX(-50%);
						position: absolute;
						width: 400rpx;
						height: 450rpx;
						//border: 1px solid red;

					}

					movable-area {
						// margin-left: -35rpx;
						// margin-top:150rpx;
						// z-index: 999;
						// top:150rpx;
						// left: -35rpx;
						// position: absolute;
						// width: 250rpx;
						// height: 250rpx;
					   
						width: 100%;
						height: 100%;
					}

					movable-view {
						width: 200rpx;
						height: 200rpx;
						 //border: 1px solid red;
						margin: auto;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.move_image {
						max-width: 200rpx;
						max-height: 200rpx;
						
						// transform: scaleX(.5);
						// transform: scaleY(.5);
						// transform: scaleZ(.5);

					}
					

					.fots{
						display: flex;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						//color:rgba(255,255,255,1);
						color: rgba(59, 113, 210, 1);
						border: 1px solid rgba(59, 113, 210, 1);
						border-radius: 10rpx;
						width: 180rpx;
						margin:auto;

						view {
							width: 50%;
							text-align: center;
							padding: 6rpx 10rpx;
						}

						.active {
							background: rgba(59, 113, 210, 1);
							color: #FFFFFF; //padding: 5rpx 10rpx;
						}

					}
					.fotss{
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 30rpx;
						color: rgba(59, 113, 210, 1);
						border: 1px solid rgba(59, 113, 210, 1);
						border-radius: 10rpx;
						margin:auto;
						width: 180rpx;
						image{
							padding: 3rpx 0;
						}
					}
				}

				.right {

					.left {
						width: 105rpx;

						.left_color {
							width: 105rpx;
							height: 33rpx;
							background: rgba(19, 181, 177, 1);
							box-shadow: 0px 2px 8px 1px rgba(19, 181, 177, 0.61);
							border-radius: 0px 16px 16px 0px;
						}

					}

					.right {
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						border: 15rpx solid rgba(59, 113, 210, 1);
					}
				}
			}

			//文字选择
			.words_nav {
				border-top: 1px solid #EEEEEE;
				border-bottom: 1px solid #EEEEEE;
				margin-top: 200rpx;
				display: flex;

				.li {
					width: 25%;
					text-align: center;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					//color:rgba(59,113,210,1);
					color: #494848;
					padding: 25rpx 0;
				}

				.active {
					color: rgba(59, 113, 210, 1);
					background: rgba(59, 113, 210, .2);
					border-radius: 10rpx;
				}
			}

			//文字图片
			.words_img {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;

				.li {
					width: 25%;
					border: 1px solid #EEEEEE;
					padding: 10rpx 0;
					box-sizing:border-box;

					image {
						 width: 90%;
						 height: 150rpx;
						padding: 0 5rpx;
					}
				}
			}

			//发货
			.goods {
				display: flex;
				justify-content: space-between;
				padding-top: 50rpx;
				padding-left: 5rpx;
				padding-right: 5rpx;


				.left {
					display: flex;
					align-items: center;
                    .lis{
						font-size: 35rpx;
					}
					.li {
						font-size: 25rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(174, 172, 172, 1);
						padding: 0rpx 10rpx;

						image {
							width: 25rpx;
							height: 30rpx;
							margin-right: 5rpx;
						}
					}

				}

				.right {
					display: flex;
					align-items: center;

					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(255, 180, 0, 1);
					border: 1px solid rgba(255, 180, 0, 1);
					border-radius: 40rpx;
					padding: 5rpx 10rpx;

					image {
						//font-size: 0;
						width: 20rpx;
						height: 30rpx;
					}
				}
			}


		}

		//数量
		.number {
			z-index: 9999;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 30rpx 0;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2px 15px 1px rgba(0, 0, 0, 0.08);
			position: fixed;
			bottom: 0;
			width: 100%;

			.left {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(174, 172, 172, 1);
			}

			.center {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(174, 172, 172, 1);
			}

			.right {
				.bot {
					background: linear-gradient(218deg, rgba(11, 186, 251, 0.81), rgba(66, 133, 236, 0.81));
					box-shadow: 0px 3px 6px 0px rgba(65, 129, 231, 0.51);
					border-radius: 37rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					padding: 15rpx 40rpx;
				}
			}
		}

		//更多成品
		.product {
			margin-top: 20rpx;

			.li {
				border-bottom: 10rpx solid #EEEEEE;

				.top {
					display: flex;
					justify-content: center;
					align-items: center;

					.row {
						width: 80rpx;
						height: 2rpx;
						background: rgba(59, 113, 210, 1);
						opacity: 0.27;
						border-radius: 1px;
						margin: 0 10rpx;
					}

					.center {
						font-size: 35rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(59, 113, 210, 1);
					}
				}

				.center {
					display: flex;
					flex-wrap: wrap;

					.li {
						width: 33.3%;
						border: 1rpx solid #eeeeee;
						box-sizing: border-box;
						display: flex;
						justify-content: center;
						flex-wrap: wrap;

						image {
							width: 50%;
							height: 220rpx;
							margin: auto;
							padding: 20rpx 0;
						}

						.text {
							padding-bottom: 20rpx;
							width: 100%;
							text-align: center;
							font-size: 35rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: rgba(59, 113, 210, 1);
						}
					}
				}

				.fot {
					margin: 20rpx auto;
				}
			}
		}

		//材质工艺
		.technology {
			.li {
				margin-top: 40rpx;

				.top {
					display: flex;
					justify-content: center;
					align-items: center;

					.row {
						width: 80rpx;
						height: 2rpx;
						background: rgba(59, 113, 210, 1);
						opacity: 0.27;
						border-radius: 1px;
						margin: 0 10rpx;
					}

					.center {
						font-size: 35rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(59, 113, 210, 1);
					}
				}

				.fot {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(73, 72, 72, 1);
					line-height: 30px;
					padding: 20rpx 30rpx;
				}
			}
		}

		//弹框尺码选择



		//外部样式
		.fixed {
			position: fixed;
			z-index: 99;
		}

		.VerticalNav.nav {
			width: 200upx;
			white-space: initial;

		}

		.VerticalNav.nav .cu-item {
			width: 100%;
			text-align: center;
			background-color: #fff;
			margin: 0;
			border: none;
			height: 30px;
			position: relative;
			display: flex;
			align-items: center;
		}

		.VerticalNav.nav .cu-item.cur {
			//background-color: #f1f1f1;
		}

		.VerticalNav.nav .cu-item.cur::after {
			content: "";
			width: 8upx;
			height: 30upx;
			border-radius: 10upx 0 0 10upx;
			position: absolute;
			//background-color: currentColor;
			top: 0;
			right: 0upx;
			bottom: 0;
			margin: auto;
		}

		.VerticalBox {
			display: flex;
		}

		.VerticalMain {
			//background-color: #f1f1f1;
			flex: 1;
		}
        .nav {
        	white-space: nowrap;
        }
        
        ::-webkit-scrollbar {
        	display: none;
        }
        
        .nav .cu-item {
        	height:50upx;
        	display: inline-block;
        	//line-height: 90upx;
        	margin: 0 10upx;
        	padding: 0 20upx;
        }
        
        .nav .cu-item.cur {
        	border-bottom: 4upx solid;
        }
	}
</style>
